<template>
	<view class="content">
        <image class="logo" src="../../static/logo.png"></image>
		computed计算数据总条数：{{dataLength}}
		<view>
            <view v-for="item in goods" :key="item.id">
				<u-image width="100rpx" height="100rpx" :src="item.image"></u-image>
				<text>{{item.goods_name}}</text>
			</view>
			<u-button type="primary" @click="getShopList">获取商品列表</u-button>
        </view>
		<view>
            <view v-for="item in meterials" :key="item.id">
				<u-image width="100rpx" height="100rpx" :src="item.image_url"></u-image>
				<text>{{item.material_name}}</text>
			</view>
			<u-button type="primary" @click="getMaterial">获取素材列表</u-button>
        </view>
		<view style="height:100vh;width:100%"></view>
	</view>
</template>

<script lang="ts">
	import { Component,Vue ,Watch} from "vue-property-decorator";
	import { State, Mutation, Action,namespace } from "vuex-class";
	import ShopApi from '@/api/goods'
	import MaterialApi from '@/api/material'
	import { GoodsQuery ,Goods} from '@/api/goods/types';
	import { MaterialQuery,Material} from '@/api/material/types';
	import { AppState ,User,SetUserInfoDispatch} from "@/store/app/types";

	/**确定要获取的vuex模块 */
	const appModule = namespace('app')

	@Component({})//这一句必须写
	export default class Index extends Vue{
		/**商品列表 */
		public goods:Goods[]=[]
		/**素材列表 */
		public meterials:Material[]=[]

		/**computed示例 */
		get dataLength():number{
			return this.goods.length+this.meterials.length
		}

		/**注入vuex模块中的user字段 */
		@appModule.State('user')
        public user!: User;

		@appModule.Mutation('setUserInfo')
		public setUserInfo!:SetUserInfoDispatch;

		/**watch示例 */
		@Watch('dataLength')
		onLengthChange(newValue,oldValue){
			console.log(`dataLength发生改变，旧值：${oldValue}，新值：${newValue}`)
		}

		/**小程序生命周期示例-onload */
		onLoad(){
			console.log("onLoad",this.user);
			/**调用mutations 等价于this.$store.dispatch('setUserInfo',{nick_name:"456",avatar_url:"789",id:"2"})*/
			this.setUserInfo({nick_name:"456",avatar_url:"789",id:"2"})
		}
		/**小程序生命周期示例-onReachBottom */
		onReachBottom(){
			console.log("滚动到底部");
		}

		/**自定义方法 对应vue2.x的methods里的方法 */
		getShopList(){
			//显式的定义请求参数 当参数字段较多 且可能需要复杂处理时 推荐
			var query:GoodsQuery={
                material_id: 260,
                publish_status: 1,
                goods_class_id: ""
            }
			ShopApi.getShopList(query).then(res=>{
				this.goods=res.data.list.list
			})
		}
		/**自定义方法 对应vue2.x的methods里的方法 */
		getMaterial(){
			//不需要显式的定义query参数 只要字段符合interface也可以
			MaterialApi.getMaterialList({page:1,page_size:20}).then(res=>{
				this.meterials=res.data.list
			})
		}

	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
